import './app.css'
import { useSelector, useDispatch } from 'react-redux'
import { add, del, update, allCheck } from './store/modules/taskStore'
import { useState } from 'react'

function App() {
	const { list } = useSelector(state => state.task)
	console.log('打印***list', list)
	const dispatch = useDispatch()
	const [keyword, setKeyword] = useState('')
	const handleChange = e => {
		setKeyword(e.target.value)
	}
	const handleKeyUp = e => {
		if (e.keyCode === 13) {
			dispatch(
				add({
					id: Date.now(),
					title: keyword,
					isDone: false
				})
			)
			setKeyword('')
		}
	}

	return (
		<section className="todoapp">
			<header className="header">
				<h1>todos</h1>
				<input
					className="new-todo"
					autoFocus
					autoComplete="off"
					placeholder="What needs to be done?"
					value={keyword}
					onChange={handleChange}
					onKeyUp={handleKeyUp}
				/>
			</header>
			<section className="main">
				<input
					id="toggle-all"
					className="toggle-all"
					type="checkbox"
					checked={list.every(item => item.isDone)}
					onChange={e => dispatch(allCheck(e.target.checked))}
				/>
				<label htmlFor="toggle-all"></label>
				<ul className="todo-list">
					{list.map(item => (
						<li key={item.id} className={item.isDone ? 'completed todo' : 'todo'}>
							<div className="view">
								<input
									className="toggle"
									type="checkbox"
									checked={item.isDone}
									onChange={() => dispatch(update(item.id))}
								/>
								<label>{item.title}</label>
								<button className="destroy" onClick={() => dispatch(del(item.id))}></button>
							</div>
						</li>
					))}
				</ul>
			</section>
		</section>
	)
}

export default App
